<template>
  <view class="content-box">
    <view class="order-wrap">
      <view class="order-list">
        <view
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <view class="info-wrap">
            <view class="info-gray">
              <view class="price"
                ><text>{{item.sourceAmount}}</text> {{ getReceiveCurrency(item.sourceCurrencyId) }}<text class="iconfont icon-duihuan"></text
                ><text>{{item.targetAmount}}</text> {{ getReceiveCurrency(item.targetCurrencyId) }}</view
              >
              <view class="status">{{ item.statusText }}</view>
            </view>
            <view class="info-gray">
              <text class="gray">Exchange rate</text>
              <text class="gray">{{item.exRate}}</text>
            </view>
            <view class="info-gray">
              <text class="gray">Name</text>
              <text class="gray">{{ item.userName }}</text>
            </view>
            <view class="info-gray">
              <text class="gray">order time</text>
              <text class="gray">2022-10-10 19:57:01</text>
            </view>
            <view class="info-gray">
              <text class="gray">order number</text>
              <text class="gray">{{item.orderNo}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["orderList", "currencyOption"],
  data() {
    return {};
  },
  methods:{
    getReceiveCurrency(id) {
      const arr = this.currencyOption?.filter(t => t.id == id)
      if (arr.length > 0) {
        return arr[0].currency
      } else {
        return ''
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.content-box {
  .order-wrap {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background: #f6f6f6;
    .order-list {
      .order-item {
        background: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;

        .info-wrap {
          .info-gray {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
            font-weight: 400;
            color: #878787;
            line-height: 40rpx;
            margin-bottom: 20rpx;
            .status {
              font-size: 28rpx;
              font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
              font-weight: 400;
              color: #61bdb2;
              line-height: 40rpx;
            }
            .price {
              font-size: 24rpx;
              font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
              font-weight: 500;
              color: #878787;
              line-height: 36rpx;
              display: flex;
              align-items: center;
              text {
                font-size: 32rpx;
                font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
                font-weight: 500;
                color: #fe6600;
                margin-right: 8rpx;
              }
              .icon-duihuan{
                color: #878787;
                font-size: 22px;
              }
            }
          }
          .info-gray:nth-last-child(1) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>